<template>
  <div class="hello-world">
    <header>
      <slot name="logo"></slot>
    </header>
    <div>erzi {{ fatherName }}</div>
    <button @click="handleClick">点击通知父亲修改数据</button>
    <slot></slot>
    <input type="text" v-focus.stop="123">

    <teleport to='#app' >
      <section>弹出框</section>
    </teleport>
  </div>
</template>

<script setup lang="ts">
// defineProps  这个用来定义属性
// withDefaults用来给属性添加默认值
import { defineProps, withDefaults, toRefs, defineEmits, inject, useAttrs, useSlots, DirectiveBinding } from 'vue'
import axios from 'axios'

const vFocus = {
  mounted: (el: HTMLInputElement, binding: DirectiveBinding) => {
    console.log(binding)

    el.focus()
  }
}
// 直接将属性传递到defineProps的参数中，注意驼峰命名的写法在使用时要变成连字符写法
// const props = defineProps(['fatherName'])

// const props = defineProps({
//   fatherName: {
//     type: String,
//     default: 'laowang'
//   }
// })
// console.log(props)

const props = withDefaults(defineProps<{
  fatherName?: string,
  fname: string
}>(), {
  fatherName: 'laowang'
})

const { fatherName } = toRefs(props)

// const emit = defineEmits(['changeFather'])
// eslint-disable-next-line func-call-spacing
const emit = defineEmits<{
  (e: 'changeFather', v: string): void
  (e: 'update:fname', v: string): void
}>()

const handleClick = () => {
  // emit自定义的事件
  // emit('changeFather', '老马')
  emit('update:fname', 'xxxxx')
}

const num = inject('data')
console.log(num)

const attrs = useAttrs()
console.log(attrs)

const slots = useSlots()
console.log(slots)

const res = await axios.get('https://v1.hitokoto.cn/?c=i&encode=json')
console.log(res)

</script>

<style scoped>
</style>
